<template>
  <div class="base-setting">
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :isShowBtn="false"
    ></pageHeader>
    <div class="base-setting-warp">
      <div v-for="(item, index) in setting" :key="index">
        <settingWrap
          @goDetail="goDetail(item)"
          :name="item.name"
          :description="item.description"
          :icon="item.icon"
        ></settingWrap>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import pageHeader from '@/components/page-header/index.vue';
  import settingWrap from '@/components/setting-wrap/index.vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const title: string = '基础设置';

  const breadCrumb: string[] = ['设备管理', '基础设置'];

  const setting = reactive([
    {
      name: '生产订单编号',
      description: '-主要用于配置生产订单内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'ProductionOrderNumber',
      query: {
        key: 21,
      },
    },
    // {
    //   name: '生产订单类型',
    //   description: '-主要于配置生产订单来源',
    //   icon: 'icon-settings',
    //   path: 'NumberEquipment'
    // },
    {
      name: '生产任务编号',
      description: '-主要用于配置生产任务内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'ProductiontaskNumber',
      query: {
        key: 30,
      },
    },
    {
      name: '生产工单编码',
      description: '-主要用于配置计划工单内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'MaintenanceOrderNo',
      // query: {
      //   key: 2,
      // },
    },
    {
      name: '生产计划编码',
      description: '-主要用于配置计划工单内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'ProductionManagementNumber',
      query: {
        key: 29,
      },
    },
    {
      name: '产品工单编码',
      description: '-主要用于配置产品工单内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'ProductionManagementNumber',
      query: {
        key: 28,
      },
    },
    {
      name: '产品计划编码',
      description: '-主要用于配置产品计划内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'ProductionManagementNumber',
      query: {
        key: 29,
      },
    },
    {
      name: '生产排程编码',
      description: '-主要用于配置生产排程内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'ProductionManagementNumber',
      query: {
        key: 36,
      },
    },
    {
      name: '产品领料编码',
      description: '-主要用于配置产品计划内部统一编号，方便查询',
      icon: 'icon-settings',
      path: 'ProduceOutboundNumber',
    },
  ]);

  const goDetail = (item: any) => {
    router.push({
      name: item.path,
      query: item.query,
    });
  };
  // ProductionManagementNumber
</script>

<style scoped lang="less">
  .base-setting {
    &-warp {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }
  }
</style>
